<template>
  <view class="flex-col page">
    <!-- <view class="flex-row justify-center items-center self-stretch relative group">
      <image class="image pos" src="../../static/wx/de9a58ed15b96e4c9f74671871351afb.png" />
      <text class="text">我的个人资料</text>
    </view> -->
    <text class="self-start font text_2">个人信息</text>
    <view class="flex-col self-stretch group_2">
      <text class="self-start font_2 text_3">你的姓名</text>
      <view
        class="flex-col justify-start items-start self-stretch text-wrapper"
      >
        <input class="uni-input font_2 text_4" placeholder="请输入您的姓名" />
      </view>
      <view class="flex-row equal-division">
        <view class="flex-col group_3 equal-division-item">
          <text class="self-start font_2 text_5">姓别</text
          ><picker @change="bindPickerChange" :value="index" :range="array">
            <view
              class="flex-row justify-between items-center self-stretch select-box mt-19"
            >
              <text class="font_3">{{ array[index] }}</text>
              <image
                class="image_3"
                src="../../static/wx/9b7feca01e673f8b56598b14f80e7c03.png"
              /> </view
          ></picker>
        </view>
        <view class="flex-col group_3 equal-division-item">
          <text class="self-start font_2 text_5">年龄</text>
          <view
            class="flex-row justify-between items-center self-stretch select-box mt-19"
          >
            <input
              class="uni-input font_3"
              value="23"
              placeholder="请输入您的姓名"
            />
            <image
              class="image_2"
              src="../../static/wx/012152f70e7da493feda93576a39edf0.png"
            />
          </view>
        </view>
      </view>
      <text class="self-start font_2 text_6">上传头像</text>
      <image
        class="self-start image_4"
        src="../../static/wx/93f3f97b53fc109946c5a481f0ea3d8b.png"
      />
    </view>
    <view class="flex-col self-stretch group_5">
      <view class="flex-row justify-between items-center">
        <text class="font text_7">地址</text>
        <view class="flex-row items-center">
          <image
            class="shrink-0 image_5"
            src="../../static/wx/78720994db2f6b31eb4882d409b75f8c.png"
          />
          <text class="text_8 ml-21">添加新</text>
        </view>
      </view>
      <view class="flex-col list">
        <view
          class="flex-col list-item mt-15"
          v-for="(item, index) in 2"
          :key="index"
        >
          <view class="flex-row justify-between items-center self-stretch">
            <view class="group_6">
              <text class="font_4">办公室</text>
              <text class="font_4 text_9">(默认)</text>
            </view>
            <image
              class="image_6"
              src="../../static/wx/9df3a70a2cb6ba8c0662a9e91034731a.png"
            />
          </view>
          <text class="self-start font_5 text_10 mt-11">+159 5039 23**</text>
          <text class="self-start font_5 text_11 mt-11"
            >北京市海淀区中关村大街15号</text
          >
        </view>
      </view>
      <view class="flex-col list-box">
        <view class="flex-row justify-between items-center group_7">
          <text class="font text_15">更改密码</text>
          <image
            class="image_8"
            src="../../static/wx/564a3b944af32f4baa87d761b5df9b72.png"
          />
        </view>
        <view class="flex-row justify-between items-center group_7">
          <text class="font text_15">退出登录</text>
          <image
            class="image_8"
            src="../../static/wx/564a3b944af32f4baa87d761b5df9b72.png"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      array: ["男", "女"],
      index: 0,
    };
  },

  methods: {
    bindPickerChange: function (e) {
      this.index = e.detail.value;
    },
  },
};
</script>

<style scoped lang="css">
.mt-19 {
  margin-top: 38rpx;
}
.ml-21 {
  margin-left: 42rpx;
}
.mt-15 {
  margin-top: 30rpx;
}
.mt-11 {
  margin-top: 22rpx;
}
.page {
  padding: 0 32rpx 60rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding: 0 24rpx 8rpx;
}
.image {
  width: 48rpx;
  height: 44rpx;
}
.pos {
  position: absolute;
  left: 24rpx;
  top: 50%;
  transform: translateY(-50%);
}
.text {
  color: #2d3142;
  font-size: 40rpx;
  font-family: Laila;
  font-weight: 700;
  line-height: 37.72rpx;
}
.font {
  font-size: 36rpx;
  font-family: Mukta;
  line-height: 33.8rpx;
  font-weight: 700;
  color: #2d3142;
}
.text_2 {
  margin-left: 24rpx;
  margin-top: 50rpx;
  line-height: 34.2rpx;
}
.group_2 {
  margin-top: 52rpx;
}
.font_2 {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 30.28rpx;
  font-weight: 600;
  color: #2d3142;
}
.text_3 {
  margin-left: 24rpx;
}
.text-wrapper {
  margin: 40rpx 24rpx 0;
  padding: 28rpx 0 36rpx;
  border-radius: 24rpx;
  border: solid 2rpx #e6e9f1;
}
.text_4 {
  margin-left: 40rpx;
  color: #2d3142;
  line-height: 29.64rpx;
  font-weight: unset;
}
.equal-division {
  align-self: stretch;
  margin-top: 24rpx;
}
.group_3 {
  flex: 1 1 342rpx;
}
.equal-division-item {
  padding: 8rpx 24rpx;
}
.text_5 {
  line-height: 30.2rpx;
}
.select-box {
  padding: 28rpx 28rpx 28rpx 40rpx;
  border-radius: 24rpx;
  border: solid 2rpx #e6e9f1;
  height: 96rpx;
}
.font_3 {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 20.74rpx;
  color: #2d3142;
  width: 150rpx;
}
.image_3 {
  border-radius: 2rpx;
  width: 26rpx;
  height: 20rpx;
}
.image_2 {
  width: 26rpx;
  height: 44rpx;
}
.text_6 {
  margin-left: 24rpx;
  margin-top: 24rpx;
  line-height: 30.12rpx;
}
.image_4 {
  margin-left: 24rpx;
  margin-top: 40rpx;
  width: 296rpx;
  height: 296rpx;
}
.group_5 {
  margin-top: 60rpx;
  padding: 0 24rpx;
}
.text_7 {
  line-height: 33.12rpx;
}
.image_5 {
  width: 18rpx;
  height: 18rpx;
}
.text_8 {
  color: #3a7beb;
  font-size: 28rpx;
  font-family: Mukta;
  font-weight: 700;
  line-height: 26.2rpx;
}
.list {
  margin-top: 40rpx;
}
.list-item {
  padding: 32rpx 40rpx 44rpx;
  background-color: #fbfbfd;
  border-radius: 32rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.group_6 {
  line-height: 32.04rpx;
  height: 32.06rpx;
}
.font_4 {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 30.28rpx;
  font-weight: 700;
  color: #2d3142;
}
.text_9 {
  color: #9c9db9;
  line-height: 32.04rpx;
}
.image_6 {
  width: 28rpx;
  height: 28rpx;
}
.font_5 {
  font-size: 32rpx;
  font-family: Lantinghei SC;
  line-height: 30.28rpx;
  color: #2d3142;
}
.text_10 {
  line-height: 26.5rpx;
}
.text_11 {
  line-height: 30.26rpx;
}
.list-box {
  margin-top: 20rpx;
  margin-bottom: 50rpx;
}
.group_7 {
  padding: 40rpx 0;
  border-bottom: solid 2rpx #e6e9f1;
}
.text_15 {
  line-height: 33.94rpx;
}
.image_8 {
  width: 16rpx;
  height: 28rpx;
}
</style>
